<template>
  <div class="home">
    <span>Home组件</span>
    <div style="width: 100vw; height: 100vh" @contextmenu.prevent="onContextmenu"></div>
    <div class="flex-box">
      <div class="block">
        <span class="demonstration">有默认值</span>
        <el-color-picker v-model="color1"></el-color-picker>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import Contextmenu from 'vue-contextmenujs'
import { SpotLight } from 'three'
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'

Vue.use(Contextmenu)

export default {
  data() {
    return {
      color1: '#409EFF'
    }
  },
  methods: {
    onContextmenu(event) {
      this.$contextmenu({
        items: [
          {
            label: '返回(B)',
            onClick: () => {
              this.message = '返回(B)'
              console.log('返回(B)')
            }
          },

          {
            label: '使用网页翻译(T)',
            divided: true,
            minWidth: 0,
            children: [{ label: '翻译成简体中文' }, { label: '翻译成繁体中文' }]
          },
          {
            label: '截取网页(R)',
            minWidth: 0,
            children: [
              {
                label: '截取可视化区域',
                onClick: () => {
                  this.message = '截取可视化区域'
                  console.log('截取可视化区域')
                }
              },
              { label: '截取全屏' }
            ]
          }
        ],
        event, // 鼠标事件信息
        customClass: 'custom-class', // 自定义菜单 class
        zIndex: 3, // 菜单样式 z-index
        minWidth: 230 // 主菜单最小宽度
      })
      return false
    },
    Main() {
      let gui = new GUI()

      let spotLight = new SpotLight(0xd42525, 1)
      spotLight.position.set(-15, 40, -35)

      const params = {
        'light color': spotLight.color.getHex(),
        intensity: spotLight.intensity
      }
      gui.addColor(params, 'light color').onChange(function (val) {
        console.log('触发了颜色切换', val)
        spotLight.color.setHex(val)
      })
      gui.add(params, 'intensity', 0, 2).onChange(function (val) {
        spotLight.intensity = val
      })
      gui.open()
    }
  }
}
</script>
<style>
.home {
  position: relative;
}
.custom-class .menu_item__available:hover,
.custom-class .menu_item_expand {
  background: #ffecf2 !important;
  color: #ff4050 !important;
}
.flex-box {
  position: absolute;
  width: 400px;
  height: 400px;
  background-color: pink;
  top: 200px;
  left: 200px;
}
</style>
